<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <base href="/webcon/resources/"/>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="css/terminal.css">

    <script src="js/jquery-3.5.0.min.js"></script>
    <script src="layui/layui.js"></script>

    <!-- 引入ztree -->
    <link rel="stylesheet" href="widget/zTree/zTreeStyle/zTreeStyle.css"/>
    <script type="text/javascript" src="widget/zTree/jquery.ztree.all.min.js"></script>

    <script type="text/javascript" th:src="${#request.getContextPath() + '/commons/js/myajax.js'}"></script>
    <script type="text/javascript" th:src="${#request.getContextPath() + '/commons/js/myztree.js'}"></script>
    <script type="text/javascript" th:src="${#request.getContextPath() + '/commons/js/mytask.js'}"></script>
    <script type="text/javascript" th:src="${#request.getContextPath() + '/commons/js/mytask_status.js'}"></script>

    <script>
        //全选
        function checked_all(flag){
            var checkboxs = document.getElementsByName("client_checkbox");
            for(var i = 0; i < checkboxs.length; i++){
                checkboxs[i].checked = flag;
            }
        }

        //页面初始化
        $(function(){

            //初始化树形结构
            getWebconClientZtree("ztree_div", {
                check:true,
                showIcon: true,
                async:false
            });

        });
    </script>

</head>
<body>
<div class="header">
    <div class="list-item" onclick="openModal()">
        <div class="list-item-top">
            <img src="./img/yinliang.png" />
        </div>
        <div class="desc">音量调节</div>
    </div>
    <div class="list-item" onclick="deleteTer()">
        <div class="list-item-top">
            <img src="./img/shanchu.png" />
        </div>
        <div class="desc">删除终端</div>
    </div>
</div>
<div class="layui-form">
    <div class="layui-row">
        <div class="layui-col-md4">
            <form action="/client/listByWebcon" method="post">
                <input type="text" id="keyword" name="keyword" style="width: 300px;display: inline-block;"
                       placeholder="请输入终端ID或者终端名称进行搜索" autocomplete="off" class="layui-input"
                        th:value="${keyword}"/>
                <button style="display: inline-block;position: relative;top: -1px;" type="submit" class="layui-btn">
                    <i class="layui-icon">&#xe615;</i>搜索
                </button>
            </form>
        </div>
        <div class="layui-col-md8">
            <div class="layui-btn-group" style="float: right;">
               <!-- <button type="button" class="layui-btn">Copy</button>
                <button type="button" class="layui-btn">Cvs</button>
                <button type="button" class="layui-btn">Excel</button>
                <button type="button" class="layui-btn">PDF</button>
                <button type="button" class="layui-btn">Print</button>-->
            </div>
        </div>
    </div>
</div>
<!--<table class="layui-table" lay-data="{url:'/demo/table/user/',id:'test',page:true}" lay-skin="line" lay-filter="test">-->
<!--    <thead>-->
<!--    <tr>-->
<!--        <th lay-data="{checkbox:true}"></th>-->
<!--        <th lay-data="{field:'zt', width:60}">状态</th>-->
<!--        <th lay-data="{field:'id', width:80, sort: true}">终端ID</th>-->
<!--        <th lay-data="{field:'name', width:80, sort: true}">终端名称</th>-->
<!--        <th lay-data="{field:'mac', width:80, sort: true}">MAC地址</th>-->
<!--        <th lay-data="{field:'ip', width:80, sort: true}">IP地址</th>-->
<!--        <th lay-data="{field:'yl', width:80, sort: true}">音量</th>-->
<!--        <th lay-data="{field:'status', sort: true}">任务状态</th>-->
<!--        <th lay-data="{field:'jt', sort: true}">监听状态</th>-->
<!--        <th lay-data="{field:'rjbb', sort: true}">软件版本</th>-->
<!--        <th lay-data="{field:'gjbb', sort: true}">固件版本</th>-->
<!--        <th lay-data="{field:'yy', width:80, sort: true}">音源</th>-->
<!--    </tr>-->
<!--    </thead>-->
<!--    </tbody>-->
<!--</table>-->

<table class="layui-table">
    <thead>
    <tr>
        <th>全选 &nbsp;&nbsp; <input type="checkbox" onclick="checked_all(this.checked);"/></th>
        <th>状态</th>
        <th>终端ID</th>
        <th>终端名称</th>
        <th>MAC地址</th>
        <th>IP地址</th>
        <th>音量</th>
        <th>任务状态</th>
        <th>监听状态</th>
        <th>软件版本</th>
        <th>固件版本</th>
        <th>音源</th>
    </tr>
    </thead>
    <tbody>
    <!--<tr th:onclick="|click_tr(${client.userid}, this);|" th:switch="${4 - #strings.length(client.userid)}" th:each="client : ${clients}" class="gradeX">-->
    <tr th:id="|tr_client_${client.userid}|" th:uid="${client.userid}" th:switch="${4 - #strings.length(client.userid)}" th:each="client : ${clients}" class="gradeX">

        <th><input type="checkbox" name="client_checkbox" th:value="${client.userid}"/></th>
        <th>
            <img style="width: 20px; height: 20px" th:src="${client.status == 1 ? '/commons/images/online.png' : '/commons/images/offline.png'}"/>
        </th>
        <th th:case="${0}" th:text="${client.userid}">终端ID</th>
        <th th:case="${1}" th:text="${'0' + client.userid}">终端ID</th>
        <th th:case="${2}" th:text="${'00' + client.userid}">终端ID</th>
        <th th:case="${3}" th:text="${'000' + client.userid}">终端ID</th>
        <th th:text="${client.terminalname}">终端名称</th>
        <th th:text="${client.mac}">MAC地址</th>
        <th th:text="${client.ip}">IP地址</th>
        <th th:id="|client_volume_${client.userid}|" th:text="${client.volume}">音量</th>
        <!--<th th:id="|client_status_${client.userid}|" th:switch="${client.status}">
           <span th:case="0" th:text="任务空闲"></span>
           <span th:case="1" th:text="执行中"></span>
           <span th:case="2" th:text="任务停止"></span>
           <span th:case="3" th:text="等待中"></span>
        </th>-->
        <th th:id="|client_status_${client.userid}|">任务空闲</th>
        <th th:if="${listenStatus.containsKey('monitored') && client.userid == listenStatus.monitored}">被监听终端</th>
        <!-- <th th:unless="${listenStatus.containsKey('monitored') && client.userid == listenStatus.monitored}"></th>-->
        <th th:if="${listenStatus.containsKey('monitor') && client.userid == listenStatus.monitor}">监听终端</th>
        <!--<th th:unless="${listenStatus.containsKey('monitor') && client.userid == listenStatus.monitor}"></th>-->
        <th th:unless="${(listenStatus.containsKey('monitored') && client.userid == listenStatus.monitored) || (listenStatus.containsKey('monitor') && client.userid == listenStatus.monitor)}"></th>
        <th th:text="${client.updateStatus}"></th>
        <th th:text="${client.productsModel}"></th>
        <th th:id="|client_mp3_${client.userid}|"></th>
    </tr>


    </tbody>
</table>

<!-- 音量调节弹出框 -->
<div id="tt" style="padding:20px;display: none;">
    <div class="item">
        <div id="slideTest1" style="width: 50px;float: left;padding-top: 30px;height: 240px;"></div>
        <div style="width: 150px;float: right;height: 240px;padding-top: 30px;">
            <div class="layui-btn-group">
                <button onclick="add()" type="button" class="layui-btn layui-btn-primary layui-btn-sm">
                    <i class="layui-icon">&#xe654;</i>
                </button>
                <button onclick="sub()" type="button" class="layui-btn layui-btn-primary layui-btn-sm">
                    <i class="layui-icon">&#xe67e;</i>
                </button>
            </div>
            <div style="padding: 10px 0;">
                <span class="yl">当前：1</span>
            </div>
            <div class="layui-btn-group">
                <button id="jy" onclick="jy()" type="button" class="layui-btn layui-btn-primary layui-btn-sm">
                    <i class="layui-icon">&#xe685;</i>
                </button>
            </div>
        </div>
    </div>
    <div class="item item2">
        <div style="padding-left: 10px;padding-top: 10px;">
            <span>终端列表：</span>
            <input class="selectAll" onclick="checkall(this.checked);" style="width: 18px;height: 18px;position: relative;top: 4px;"  type="checkbox"> 全选
        </div>
        <div id="ztree_div" class="ztree"></div>
    </div>
</div>

<script th:inline="javascript">
    var min=0;
    var max=15;
    var currentValue=1;
    var ins1='';
    var checked=false
    var checkData=[] //被选中的树节点
    $(".selectAll").attr("checked",checked)
    layui.use(['table', 'form','layer','slider'], function() {
        var table = layui.table;
        var form = layui.form;
        var layer = layui.layer;
        var slider = layui.slider;
        //滑块
        ins1 =slider.render({
            elem: '#slideTest1'  ,//绑定元素
            min:min,
            max:max,
            type:'vertical',
            value:currentValue,
            showstep:false,
            change: function(value){
                console.log(value); //动态获取滑块数值
                //do something
                currentValue=value>max?max:value;
                $(".yl").text("当前："+currentValue);
            }
        });
    });
    function deleteTer(){
        layer.confirm('确定要删除吗?', {icon: 3, title:'系统提示'}, function(index){
            deleteClient();
            layer.close(index);
        });
    }
    function openModal(){
        layer.open({
            type: 1 //Page层类型
            ,area: ['500px', '400px']
            ,title: '音量调节',
            offset:'20px',
            btn: ['确定', '取消']
            ,shade: 0.6 //遮罩透明度
            ,maxmin: false //允许全屏最小化
            ,anim: 4 //0-6的动画形式，-1不开启
            ,content:$("#tt")
            ,yes: function(index, layero){
                updateVolume();
                return true;
            }
        });
    }
    function add(){
        currentValue=(currentValue+1)>max?max:(currentValue+1)
        ins1.setValue(currentValue)
        $("#jy").addClass("layui-btn-primary")
        $(".yl").text("当前："+currentValue)
    }
    function sub(){
        if(currentValue!=0){
            currentValue=(currentValue-1)<=min?min:(currentValue-1)
            ins1.setValue(currentValue)
            $(".yl").text("当前："+currentValue)
        }
    }
    function jy(){
        currentValue=0
        $(".yl").text("当前："+currentValue)
        ins1.setValue(currentValue)
        $("#jy").removeClass("layui-btn-primary")
    }


    //修改音量
    function updateVolume(){
        //获得被选择的终端
        var ztreeObj = getZtree("ztree_div");
        var znodes = ztreeObj.getCheckedNodes(true);
        var uids = [];
        for (var i = 0; i < znodes.length; i++) {
            if (znodes[i].isClient == 1) {
                //如果是终端
                uids.push(znodes[i].userid);
            }
        }

        if(uids.length <= 0){
            alert("请选择需要修改的音量的终端！");
            return;
        }

        //获得音量
        var volume = currentValue;

        myajax({
            type: "POST",
            url: [[${#request.getContextPath()}]] + "/client/updateVolume",
            data: {"uids":uids, "volume":volume},
            success: function(data){
                location.reload();
            }
        });
    }

    //删除终端
    function deleteClient(){
        var checkeds = $("[name='client_checkbox']:checked");

        if(checkeds.length <= 0){
            alert("请至少选择一个终端！");
            return;
        }

        if(checkeds.length > 1){
            alert("请最多选择一个终端！");
            return;
        }
        var uid = $(checkeds[0]).val();

        myajax({
            type: "POST",
            url: [[${#request.getContextPath()}]] + "/webcon/deleteByUid",
            data: {"userid":uid},
            success: function(data){
                location.reload();
            }
        });
    }
</script>
</body>
</html>
